<template>
    <ul v-if="listSelectItem" class="wioc-list-select">
        <li>
          <div v-if="listSelectItem.typeName" @click="showHide()">
              <h3>{{listSelectItem.typeName}}</h3>
              <span>
                  <svg ref="arrow" class="icon icon-svg" aria-hidden="true">
                    <use xlink:href="#icon-up"></use>
                  </svg>
              </span>
           </div>
          <transition name="fade">
               <dl ref="child">
                   <dd :class="getClass(item,index)" :key="'d'+index" v-for="(item,index) in listSelectItem.data" @click="select(item,listSelectItem.typeName)">
                       <h4>{{item.name||item.NAME}}</h4>
                   </dd>
               </dl>
           </transition>
        </li>
    </ul>
</template>


<script>
    export default {
        name:"wioc-list-select-item",
        components:{

        },
        data(){
            return{
				checkedList:this.defaultItem,
				mulcheckList:[],
                // listSelectItem:{
                //     "typeName": "类型选择",
                //     "data": [
                //         {
                //             "id": "7",
                //             "parentId": null,
                //             "manageClass": "民防",
                //             "typeProp": "民防事件",
                //             "name": "民防事件",
                //             "code": "3",
                //             "priority": 10
                //         },
                //         {
                //             "id": "6",
                //             "parentId": null,
                //             "manageClass": "民防",
                //             "typeProp": "民防部件",
                //             "name": "民防部件",
                //             "code": "4",
                //             "priority": 10
                //         },
                //         {
                //             "id": "5",
                //             "parentId": null,
                //             "manageClass": "综合管理",
                //             "typeProp": "部件",
                //             "name": "部件",
                //             "code": "0",
                //             "priority": 10
                //         },
                //         {
                //             "id": "4",
                //             "parentId": null,
                //             "manageClass": "综合管理",
                //             "typeProp": "智能感知",
                //             "name": "智能感知",
                //             "code": "7",
                //             "priority": 10
                //         },
                //         {
                //             "id": "3",
                //             "parentId": null,
                //             "manageClass": "综合管理",
                //             "typeProp": "热线投诉",
                //             "name": "热线投诉",
                //             "code": "5",
                //             "priority": 10
                //         },
                //         {
                //             "id": "2",
                //             "parentId": null,
                //             "manageClass": "综合管理",
                //             "typeProp": "事件（非标）",
                //             "name": "事件（非标）",
                //             "code": "6",
                //             "priority": 10
                //         },
                //         {
                //             "id": "1",
                //             "parentId": null,
                //             "manageClass": "综合管理",
                //             "typeProp": "事件",
                //             "name": "事件",
                //             "code": "1",
                //             "priority": 10
                //         }
                //     ]
                // }
            }
        },
        props:{
			defaultItem:{
				type:Array,
				default:function(){
					return []
				}
			},
            listSelectItem:Object,
            mulcheck:{
            	type:Boolean,
            	default:false
            },
        },
		created(){
		},
		methods:{
		    getClass(item,index){
                let str = ''
                let itemName = item.name ||item.NAME
                let name = itemName.match(/[\u4e00-\u9fa5]/g)
                let length = ''
                    if(name){
                        name=name.join("");
                        length = name.length + (itemName.length-name.length)/2

                    }else{
                        length = itemName.length/2
                    }
                if(this.checkedList.indexOf(item) !=-1) {
                    str+= ' active'
                }
                if(length<12&&length>=6) {
                    str+= ' col2'
                }
                if(length>=12) {
                    str+= ' col3'
                }

                return str
            },
			showHide(){
			    if(this.$refs.child.style.display == 'none'){
			        this.$refs.child.style.display = 'flex'
			        this.$refs.child.classList.add('view')
			        this.$refs.arrow.style.transform = 'rotateX(0deg)'

			    }else{
			        this.$refs.child.style.display = 'none'
			        this.$refs.child.classList.remove('view')
			        this.$refs.arrow.style.transform = 'rotateX(180deg)'

			    }
			},
			select (item) {
			    if(this.mulcheck){
			        //多选
			        if(this.checkedList.indexOf(item)!=-1){
			            this.checkedList.splice(this.checkedList.indexOf(item),1)
			        }else{
			            this.checkedList.push(item)
			        }
			    }else{
                    if(this.checkedList.indexOf(item)!=-1){
                        this.checkedList.splice(this.checkedList.indexOf(item),1)
                    }else{
                       this.$set(this.checkedList, 0, item);
                    }
			    }
			    this.$emit('checkedList',this.checkedList,this.listSelectItem.typeName)
			}

		}
    }

</script>

<style lang="less" scoped>
.wioc-list-select{
    	li{
            div{
                display: flex;
                justify-content: space-between;
                background-color: #ebedf8;
                align-items: center;
                padding: 0 0.1rem;
                margin-bottom: 0.05rem;
                h3{
                	font-size: 0.11rem;
                	line-height: 0.22rem;
                	font-weight: normal;
                	color:#979797;

                }
                span{
                    display: inline-flex;
                    width:0.2rem;
                    height:0.22rem;
                    text-align:right;
                    align-items: center;
                    transition: all 0.5s ease;
                   .icon-svg{
                       display: inline-flex;
                       width: 0.1rem;
                       height:0.1rem;
                       line-height: 0.22rem;
                       transform: rotateX(0deg);
                   }
                }
            }

    		dl{
    			display: flex;
    			justify-content: flex-start;
    			flex-wrap:wrap;
    			box-sizing: border-box;
    			padding: 0.14rem 0.14rem 0 0.14rem ;
                overflow: hidden;
                transition: all 5s ease-in-out;
                &.view{
                    animation:mymove 0.3s ease-in-out;
                    @keyframes mymove{
                        0%{
                            height:0
                        }
                        90%{
                            height:0.5rem
                        }
                        100%{
                            height:auto
                        }
                    }
                }
    			dd{
					// flex: 0 0 30%;// width: 30%;
                    flex: 0 0 31%;
					margin-right: 0.06rem;
					box-sizing: border-box;
					padding: 0 0.06rem;
					text-align: center;
					background: #f5f5f5;
					color: #a1a1a1;
					margin-bottom: 0.14rem;
					-webkit-transition: all 0.2s;
					transition: all 0.2s;
					border-radius: 0.2rem;
					cursor: pointer;
                    &.col2{
                        flex: 0 0 47%;
                    }
                    &.col3{
                        flex:0 0 100%;
                    }
    				&.active{
    					color:#4ba0f3;
    					background: #edf5fd;
    					border-radius: 0.2rem;
                        position:relative;
                        &:before{
                            position: absolute;
                            display: block;
                            top:0rem;
                            right:-0.01rem;
                            z-index: 11;
                            width: 0.1rem;
                            height: 0.1rem;
                            content: "";
                            background-image: url(./tick.png);
                            background-size: 100% 100% ;
                        }
    				}
                    h4{
                        font-size: 0.11rem;
                        line-height: 0.28rem;
                        font-weight: normal;
                        // white-space: nowrap;
                        // text-overflow: ellipsis;
                        // overflow: hidden;
                        text-align: center;
                    }
					 /*&:nth-child(3n){*/
					 	/*margin-right: 0;*/
					 /*}*/
    			}
    		}
    	}
    }


</style>
